<template>
  <div class="seat-sign-wrap">
    <div class="header-wrap">
      <div class="header-title">图书馆空间预约系统</div>

      <div class="set-wrap" v-if="!isSet">
        <el-select
          size="small"
          class="set-item"
          v-model="libId"
          placeholder="请选择"
          @change="libChange()"
        >
          <el-option v-for="item in libraryList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <el-select
          size="small"
          class="set-item"
          v-model="floorId"
          placeholder="请选择"
          @change="floorChange"
        >
          <el-option v-for="item in floorList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <el-select
          size="small"
          class="set-item"
          v-model="roomId"
          placeholder="请选择"
          @change="roomChange"
        >
          <el-option
            v-for="item in readingRoomList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-button @click="set" size="small" type="primary">设 置</el-button>
      </div>
    </div>
    <div v-if="isSet" class="room-header">{{ libName }} {{ floorName }} {{ roomName }}</div>
    <div class="seat-wrap">
      <div v-show="!isSet" class="no-set">请 先 设 置 阅 览 室</div>
      <div v-show="isSet" class="seat-content">
        <div class="room">
          <!--      显示底部网格-->
          <div
            v-for="(item, index) in blankRows"
            class="item"
            @click="blankClick(index)"
            :key="index"
          >
            <div v-if="!item.show" class="seat"></div>
            <van-popover v-else v-model="item.show" :offset="[0, 0]" placement="top" theme="dark">
              <slot name="blankMenu"></slot>
              <template #reference>
                <div class="seat" :class="index === lastBlankIndex ? 'seatSelect' : ''"></div>
              </template>
            </van-popover>
          </div>
        </div>

        <div class="room-seat">
          <!--      显示座位-->
          <div
            v-for="item in seatRows"
            @click="seatClick(item)"
            class="item"
            :style="'grid-row:' + item.row + ';grid-column:' + item.column"
            :key="item.sid"
          >
            <SignSeat v-if="!item.show" :item="item"></SignSeat>
            <van-popover v-else v-model="item.show" :offset="[0, 0]" placement="top" theme="dark">
              <slot name="seatMenu"></slot>
              <template #reference>
                <seat :item="item"></seat>
              </template>
            </van-popover>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="签到" :visible.sync="visible" width="30%">
      <el-form
        size="small"
        :model="fromData"
        status-icon
        ref="dataForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="图书馆:" style="margin-bottom: 0px">
          {{ libName }}
        </el-form-item>
        <el-form-item label="楼层:" style="margin-bottom: 0px">
          {{ floorName }}
        </el-form-item>
        <el-form-item label="阅览室:" style="margin-bottom: 0px">
          {{ roomName }}
        </el-form-item>
        <el-form-item label="座位号:" style="margin-bottom: 0px">
          {{ selectSeat ? selectSeat.row : '' }}{{ selectSeat ? selectSeat.column : '' }}
        </el-form-item>
        <el-form-item label="读者证号:" prop="number">
          <el-input v-model="fromData.number"></el-input>
        </el-form-item>
        <el-form-item label="读者密码:" prop="password">
          <el-input type="password" v-model="fromData.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Area from './../components/Area.vue'
import request from '@/req'
import dayjs from 'dayjs'
import SignSeat from '@/components/Sign-Seat'
export default {
  components: { Area, SignSeat },
  data() {
    return {
      libId: '',
      libName: '',
      libraryList: [],
      floorId: '',
      floorName: '',
      floorList: [],
      roomId: '',
      roomName: '',
      readingRoomList: [],
      isSet: false,
      blankRows: [],
      seatRows: [],
      today: dayjs().format('YYYY-MM-DD'),
      visible: false,
      selectSeat: null,
      fromData: {
        sid: '',
        number: '',
        password: '',
        recDate: '',
      },
      rules: {
        number: [{ required: true, message: '请输入读者证号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入读者密码', trigger: 'blur' }],
      },
    }
  },
  created() {
    this.getLibraryList()
    for (let i = 0; i < 225; i++) {
      this.blankRows.push({
        show: false,
      })
    }
  },
  methods: {
    async getLibraryList() {
      const res = await request.get('/library/getLibraryList')
      this.libraryList = res ? res : []
    },
    libChange() {
      this.libName = this.libraryList.find((v) => (v.id = this.libId)).name
      this.floorId = ''
      this.floorName = ''
      this.roomId = ''
      this.roomName = ''
      this.floorList = []
      this.readingRoomList = []
      this.getFloorListByLibId()
    },
    async getFloorListByLibId() {
      const res = await request.get(`/floor/getFloorListByLibId?libId=${this.libId}`)
      this.floorList = res ? res : []
    },
    floorChange() {
      this.floorName = this.floorList.find((v) => (v.id = this.floorId)).name
      this.roomId = ''
      this.roomName = ''
      this.readingRoomList = []
      this.getReadingRoomByFloorId()
    },
    async getReadingRoomByFloorId() {
      const res = await request.get(`/readingRoom/getReadingRoomByFloorId?floorId=${this.floorId}`)
      this.readingRoomList = res ? res : []
    },
    roomChange() {
      this.roomName = this.readingRoomList.find((v) => (v.id = this.roomId)).name
    },
    seatClick(item) {
      this.selectSeat = item
      this.visible = true
    },
    submitForm() {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return
        }
        this.fromData.sid = this.selectSeat.sid
        this.fromData.recDate = this.today
        request.post(`/user/libSigned`, this.fromData).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '签到成功',
            })
            this.visible = false
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    set() {
      if (!this.libId || !this.floorId || !this.roomId) {
        this.$message({
          type: 'warning',
          message: '请先选择阅览室',
        })
        return
      }
      request
        .post('/public/getAreaSeats', {
          roomId: this.roomId,
          orderDate: this.today,
        })
        .then((res) => {
          this.seatRows = res.rows ? res.rows : []
        })
      this.isSet = true
    },
  },
}
</script>

<style scoped>
.seat-sign-wrap {
  height: 100vh;
  width: 100vw;
}

.header-wrap {
  display: flex;
  background-color: #4bcfd6;
  height: 50px;
  align-items: center;
  justify-content: space-between;
}

.header-wrap .header-title {
  color: #fff;
  margin-left: 100px;
  font-size: 24px;
  font-weight: 600;
}
.set-wrap {
  margin-left: 30px;
  margin-right: 30px;
}

.set-item {
  margin-right: 15px;
}
.room-header {
  font-size: 22px;
  text-align: center;
  margin-top: 10px;
}
.no-set {
  font-size: 28px;
  text-align: center;
  margin-top: 20%;
  color: #ccc;
}
.seat-wrap {
  display: flex;
  justify-content: center;
}
.seat-content {
  margin-top: 20px;
  position: relative;
}
.room {
  display: grid;
  /*background: #e4e4e4;*/
  grid-template-rows: repeat(9, 50px);
  grid-template-columns: repeat(25, 50px);
}
.room-seat {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  display: grid;
  /*background: #e4e4e4;*/
  grid-template-rows: repeat(9, 50px);
  grid-template-columns: repeat(25, 50px);
}
.item {
  width: 48px;
  height: 48px;
  cursor: pointer;
}

.item .seat {
  border: 1px solid #e8e8e8;
  width: 46px;
  box-sizing: border-box;
  height: 46px;
  margin: 2px;
  position: relative;
}
</style>
